import React from 'react'
import '../rem'
import style from './Home_Faxian.module.css'
import { Swiper } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import instance from '../http/instance'
export default function Home_Faxian(props) {
    let navigate = useNavigate()
    let changestatus = async (id, val) => {
        let { data: { code } } = await instance.get("changelike", {
            params: {
                id,
                islike: val
            }
        })
        if (code == 200) {
            props.getlist()
        }
    }
    return (
        <div>
            {/* 筛选感兴趣的人 */}
            <div className={style.faxian}>
                <Swiper>
                    {
                        props.list.map((color, index) => (
                            <Swiper.Item key={index}>
                                <div
                                    className={style.content}
                                    onClick={() => {
                                        navigate(`/xiang?id=${color._id}`)
                                    }}
                                >
                                    <img src={color.img_url} alt="" width="100%" />
                                    <div className={style.itemContent}>
                                        <p style={{ fontSize: "0.4rem", fontWeight: "bold" }}>{color.name}</p>
                                        <div style={{ fontSize: "0.2rem",color: "white" }}>
                                                {
                                                    color.cate.map((item, index) => {
                                                        return (
                                                            <div key={index}>
                                                                <span>{item.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                                <span>{item.name1}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                        </div>
                                    </div>
                                </div>
                                <div className={style.like} onClick={() => {
                                    console.log(color);
                                    changestatus(color._id, !color.islike)
                                }}>
                                    {
                                        !color.islike ? <svg t="1733137275072" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2934" width="40%" height="40%"><path d="M736.048379 127.978498c-65.881404 0-128.494541 24.942046-176.314463 70.525785-4.644381 4.300353-28.726356 28.726356-47.30388 47.647909l-47.30388-47.131866c-47.819923-45.755753-110.605073-71.041828-177.00252-71.041828-141.223585 0-255.956996 114.905426-255.956996 255.956996 0 82.394759 41.111372 144.319839 76.546279 182.506971l316.849992 320.11826c25.11406 25.11406 52.980346 41.455401 86.695112 41.455401 33.714766 0 61.581052-16.341341 86.695112-41.455401l316.677977-319.946246 2.236183-2.408198c38.187133-47.647909 74.310096-92.715606 74.310096-180.098774C992.005375 242.883924 877.09995 127.978498 736.048379 127.978498z" fill="#dbdbdb" p-id="2935"></path></svg> : <svg t="1733137275072" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2934" width="40%" height="40%"><path d=" M736.048379 127.978498c-65.881404 0-128.494541 24.942046-176.314463 70.525785-4.644381 4.300353-28.726356 28.726356-47.30388 47.647909l-47.30388-47.131866c-47.819923-45.755753-110.605073-71.041828-177.00252-71.041828-141.223585 0-255.956996 114.905426-255.956996 255.956996 0 82.394759 41.111372 144.319839 76.546279 182.506971l316.849992 320.11826c25.11406 25.11406 52.980346 41.455401 86.695112 41.455401 33.714766 0 61.581052-16.341341 86.695112-41.455401l316.677977-319.946246 2.236183-2.408198c38.187133-47.647909 74.310096-92.715606 74.310096-180.098774C992.005375 242.883924 877.09995 127.978498 736.048379 127.978498z" fill="#d81e06" p-id="2935"></path></svg>
                                    }
                                </div>
                            </Swiper.Item>
                        ))
                    }
                </Swiper>
            </div >
            {/* 灵魂匹配和有趣的人 */}
            <div className={style.container}>
                <div className={style.left}>
                    <div>
                        <h3 style={{ width: "1.2rem", fontSize: "0.3rem", fontWeight: "bold" }}>灵魂匹配</h3>
                        <p style={{ width: "1.2rem", fontSize: "0.15rem" }}>和懂你的人聊天</p>
                    </div>
                    <div>
                        <img src="./Home1.png" width='90rem' height={'80rem'} />
                    </div>
                </div>
                <div className={style.right}>
                    <div>
                        <h3 style={{ width: "1.2rem", fontSize: "0.3rem", fontWeight: "bold" }}>有趣的人</h3>
                        <p style={{ width: "1.2rem", fontSize: "0.15rem" }}>发现有趣的灵魂</p>
                    </div>
                    <div>
                        <img src="./Home2.png" width='90rem' height={'80rem'} />
                    </div>
                </div>
            </div>
        </div >
    )
}
